<style lang="scss">
	/*index-header 首页头部背景色*/
	.index-header { 
		height: 88rpx; 
		background-color: #ffffff; 
		position: fixed; 
		left: 0; 
		right: 0; 
		z-index: 10; 
	}
	.index-header ._logo { margin: 24rpx auto 0; width: 172rpx; }
	.index-header ._location { display: flex; align-items: center; width: 200rpx; 
	height: 88rpx; line-height: 88rpx; color: #333; position: absolute; left: 20rpx; top: 0; }
	.index-header ._location ._span { flex: 1; white-space: nowrap; overflow: hidden; 
	text-overflow: ellipsis; }
	.index-headerh { width: 100%; height: 88rpx; }

	/*index-focus*/
	.index-focus { padding: 10rpx 30rpx 20rpx; }
	.index-focus .image { border-radius: 10rpx; overflow: hidden; }

	/*index-super*/
	.index-super { padding: 0 10rpx; height: 40rpx; line-height: 40rpx; }
	.index-super .flex-1 { text-align: center; color: $theme-color; }

	/*index-function*/
	.index-function { padding: 40rpx 20rpx 30rpx; }
	.index-function .cell { text-align: center; color: #333; }
	.index-function .icon { margin: 0 auto; width: 90rpx; height: 90rpx; }
	.index-function .desc { margin-top: 20rpx; line-height: 40rpx; font-size: 28rpx; }

	/*index-elite*/
	.index-elite { 
		margin: 10rpx 30rpx; min-height: 380rpx; 
		//background: url(/static/image/ielite-bg.jpg); 
		//background: #dcf7fc; 
		background: linear-gradient(300deg,#aa8050 0%, #fbcd8a 100%);
		background-size: 100% 100%; 
		border-radius: 20rpx; 
		overflow: hidden; 
	}
	
	.index-elite_title { padding: 30rpx 20rpx 20rpx 30rpx; line-height: 44rpx; color: #333; }
	.index-elite_title ._title { font-size: 32rpx; font-weight: bold; }
	.index-elite_title ._more { opacity: .5; }
	.index-elite_list { padding: 0 12rpx; }
	.index-elite_list .cell { }
	.index-elite_list .cbox { margin: 0 12rpx; position: relative; }
	.index-elite_list .icon { width: 100%; height: 268rpx; border-radius: 10rpx; overflow: hidden; }
	.index-elite_list .desc { padding: 60rpx 20rpx 20rpx; 
	background: linear-gradient(0deg, #0f0e0c, transparent); 
	position: absolute; left: 0; right: 0; bottom: 0; }
	.index-elite_list .desc ._name { height: 36rpx; line-height: 36rpx; color: #fff; }
	.index-elite_list .desc ._distance { font-size: 20rpx; opacity: .8; }
	.index-elite_list .desc ._btn { margin-top: 8rpx; height: 40rpx; line-height: 40rpx; 
	text-align: center; border-radius: 8rpx; }

	/*index-tabs*/
	.index-tabs { }
	.index-tabs .cell { padding: 20rpx 0; line-height: 50rpx; text-align: center; color: #333; font-size: 32rpx; font-weight: 700; opacity: .6; position: relative; }
	.index-tabs .current { opacity: 1; }
	.index-tabs .current::after { content: ""; width: 64rpx; height: 6rpx; 
	background: linear-gradient(to right, $theme-linear1, $theme-linear2); 
	border-radius: 6rpx; position: absolute; bottom: 0; left: 50%; margin-left: -32rpx; }

	/*index-technician*/
	.index-technician { padding: 0 20rpx 40rpx; color: #fff; }
	.index-technician .cell { display: inline-block; float: left; margin-top: 20rpx; width: 50%; }
	.index-technician .cbox { margin: 0 10rpx; position: relative; }
	.index-technician .icon { width: 100%; height: 410rpx; border-radius: 10rpx; overflow: hidden; }
	.index-technician .desc { padding: 60rpx 20rpx 20rpx; background: linear-gradient(0deg, #0f0e0c, transparent); position: absolute; left: 0; right: 0; bottom: 0; }
	.index-technician .desc ._nick { height: 40rpx; line-height: 40rpx;  font-size: 28rpx; font-weight: bold; color: #fff;}
	.index-technician .desc ._distance { line-height: 32rpx; font-size: 20rpx; color: #fff;}
	.index-technician .desc ._distance ._em { color: $theme-color2; }
	
	.title{
		 position:relative;
		 box-sizing:border-box;
		 width:100%;
		 color: #333;
		 text-align:center;
		 line-height:44px;
		 font-size:17px;
		 overflow:hidden;
		 text-overflow:ellipsis;
		 white-space:nowrap
	}
	.home-body {
		font-size: 24rpx; 
		background-color: #ffffff;
	}
</style>

<template>
	<view class="home-body">
		<view class="status-bar_fixed" style="background-color: #0F0E0C;"></view>
		<view class="status-bar_fixedh"></view>

		<view class="index-header" style="background: #fff linear-gradient(90deg, #d7b075, #aa8050); padding: 0 200rpx;">
			<view class="_location" @click="$common.goPage('/pages/location/location')">
				<uni-icons type="location-filled" size="16" color="#fff"></uni-icons>
				<view class="_span" style="color: #fff;">{{$mStore.state.location.name || '未获取定位'}}</view>
				<uni-icons type="bottom" size="16" color="#fff"></uni-icons>
			</view>
			<view class="title">
				<div class="title" style="color: #fff;">康约到家</div>
				<!-- <image mode="widthFix" class="image2" src="/static/image/logo-word.png"></image> -->
			</view>
		</view>
		<view class="index-headerh"></view>

		<view v-if="focusItems.length" class="index-focus">
			<swiper>
				<swiper-item v-for="(item,index) in focusItems" :key="index">
					<image class="image" mode="aspectFill" :src="$common.binImage(item.imgUrl,1,1)"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="index-super">
			<view class="flex2" style="margin-top: 10px;">
				<view class="flex-1" v-for="(item,index) in superItems" :key="index">
					<image class="image3" mode="aspectFit" src="/static/image/shield.png" style="width: 28rpx; height: 28rpx;"></image> {{item}}
				</view>
			</view>
		</view>

		<view class="index-function">
			<view class="flex2">
				<block v-for="(item,index) in functionItems" :key="index">
					<navigator class="flex-1 cell" :url="item.url" hover-class="none">
						<view class="icon">
							<image class="image" mode="scaleToFill" :src="item.icon"></image>
						</view>
						<view class="desc">
							{{item.label}}
						</view>
					</navigator>
				</block>
			</view>
		</view>

		
		<view style="padding: 0 30rpx 20rpx;">
			<image mode="widthFix" class="image2" src="/static/ibannar.jpg" style="border-radius: 20rpx;"></image>
		</view>

		<view class="flex2 index-tabs">
			<view class="flex-1 cell" :class="{'current':tabIndex == 'nearby'}" @click="tabIndex = 'nearby'">附近</view>
			<view class="flex-1 cell" :class="{'current':tabIndex == 'red'}" @click="tabIndex = 'red'">红牌</view>
			<view class="flex-1 cell" :class="{'current':tabIndex == 'new'}" @click="tabIndex = 'new'">新人</view>
		</view>
		<view class="index-technician">
			<view class="cells">
				<block v-for="(item,index) in technicianItems[tabIndex]" :key="index">
					<navigator class="cell" :url="'/pages/technicianDetail/technicianDetail?id=' + item.id" hover-class="none">
						<view class="cbox">
							<view class="icon">
								<image class="image" mode="aspectFill" :src="$common.binImage(item.headImg)"></image>
							</view>
							<view class="desc">
								<view class="_nick">{{item.nickName}}</view>
								<view class="_distance">
									<text class="_em" v-if="tabIndex=='nearby'">{{$common.distance(item.distance)}}</text>
									<text>{{item.storeName}}</text>
								</view>
							</view>
						</view>
					</navigator>
				</block>
				<view class="clear"></view>
			</view>
		</view>

		<!-- 组件 -->
		<Upgrade ref="refUpgrade" />
	</view>
</template>

<script>
	import Upgrade from "@/components/upgrade"

	import {
		focusRequest,
	} from "@/api/common"
	import {
		listRequest as technicianListRequest,
	} from "@/api/technician"

	export default {
		components: {
			Upgrade,
		},
		data() {
			return {
				focusItems: [],
				superItems: ['平台担保', '官方认证', '收费透明', '爽约包退', ],
				functionItems: [{
					label: "附近门店",
					icon: "/static/menu/menu-1.png",
					url: '/pages/technician/product'
				}, {
					label: "上门服务",
					icon: "/static/menu/menu-2.png",
					url: '/pages/technician/product'
				}, {
					label: "靠谱专区",
					icon: "/static/menu/menu-3.png",
					url: '/pages/technician/reliable'
				}, {
					label: "特惠专区",
					icon: "/static/menu/menu-4.png",
					url: '/pages/technician/discount'
				}],

				tabIndex: 'nearby',
				technicianItems: {
					elite: [],
					nearby: [],
					new: [],
				},
			}
		},
		onLoad(options) {
			this.init()
		},
		onShow() {
			uni.setTabBarStyle({
				"backgroundColor": "#ffffff",
				"color": "#B8B8B8",
				"selectedColor": "#aa8050",
			})
		},
		onReady() {
			this.$refs.refUpgrade.autoCheck()
		},
		methods: {
			init() {
				this.getFocus()

				this.getList('elite')
				this.getList('nearby')
				this.getList('new')
				this.getList('red')
			},
			getFocus() {
				focusRequest().then(res => {
					if (res && res.data && res.data.length) {
						this.focusItems = res.data
					}
				})
			},
			getList(type) {
				let {
					location
				} = this.$mStore.state
				let formValue = {
					pageNum: 1,
					pageSize: 10,
					status: 1,
					accountType: 1,
					latitude: location.latitude ? location.latitude : '',
					longitude: location.longitude ? location.longitude : '',
				}
				if (type == 'elite') {
					formValue.pageSize = 3
					formValue.mustStatus = 1
				} else if (type == 'nearby') {

				} else if (type == 'new') {
					formValue.newStatus = 1
				} else if (type == 'red') {
					formValue.redStatus = 1
				}
				technicianListRequest(formValue).then(res => {
					if (res && res.rows && res.rows.length) {
						this.technicianItems[type] = res.rows
					}
				})
			},
		},
		onPullDownRefresh() {
			this.init()

			uni.stopPullDownRefresh()
		},
	}
</script>
